<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="../css/smartphoto.min.css">
	<title>jquery-smartphoto.js</title>
	<style>
	.brick {
		height: 500px;
		overflow: hidden;
	}
	</style>
</head>
<body>

		<div class="brick">
				<a href="./assets/large-lion.jpg" class="js-img-viewer" data-caption="Lion" data-id="lion">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/lion.jpg" alt="" width="360"/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-camel.jpg" class="js-img-viewer" data-caption="Camel" data-id="camel">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/camel.jpg" alt="" width="360"/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-hippo.jpg" class="js-img-viewer" data-caption="Hippo" data-id="hippo">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/hippo.jpg" alt="" width="360" />
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-koala.jpg" class="js-img-viewer" data-caption="Koala" data-id="koala">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/koala.jpg" alt="" width="360" />
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-bear.jpg" class="js-img-viewer" data-caption="Bear" data-id="bear">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/bear.jpg" alt="" width="360"/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-rhino.jpg" class="js-img-viewer" data-caption="Rhino" data-id="rhino">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/rhino.jpg" alt="" width="360"/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/sample.png" class="js-img-viewer" data-caption="Rhino" data-id="rhino">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/sample.png" alt="" width="360"/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-bear.jpg" class="js-img-viewer" data-caption="Bear" data-id="bear">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/bear.jpg" alt="" width="360"/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-rhino.jpg" class="js-img-viewer" data-caption="Rhino" data-id="rhino">
					<img class="lazy" data-src="./assets/rhino.jpg" alt="" width="360"/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/sample.png" class="js-img-viewer" data-caption="Rhino" data-id="rhino">
					<img src="https://miro.medium.com/max/1080/0*DqHGYPBA-ANwsma2.gif" class="lazy" data-src="./assets/sample.png" alt="" width="360"/>
				</a>
			</div>

	<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.min.js"></script>
	<script src="../js/smartphoto.min.js?v=1"></script>
	<script>

	new LazyLoad({
		elements_selector: ".lazy"
	});
	new SmartPhoto(".js-img-viewer", {
		lazyAttribute: "data-src"
	});
	</script>
</body>
</html>
